header {
  background: purple;
  height: 100px;
}

h2 {
  text-align: center;
  color: white;
  line-height: 100px;
  margin: 0;
}

article {
  margin: 10px;
  padding: 10px;
  background: aqua;
  border-radius: 16px;
}

.flex_demo1 section {
  display: flex;
  /* flex-direction: row; */
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
}

.flex_demo2 section {
  display: flex;
  flex-wrap: wrap;
}

.flex_demo2 article {
  /* flex: 200px; */
  flex: 1 1 200px;
}

.flex_demo3 section {
  display: flex;
}

.flex_demo3 article {
  flex: 1;
}

.flex_demo3 article:nth-of-type(3) {
  flex: 2;
}

.flex_demo4{
    display: flex;
    background: rgb(128, 233, 125);
    border-radius: 16px;
    height: 100px;
    /* 交叉轴方向对齐 */
    align-items: center;
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: baseline; */
    /* align-items: stretch; */
    /* 主轴方向对齐 */
    /* justify-content: baseline; */
    /* justify-content: center; */
    /* justify-content: flex-start; */
    /* justify-content: flex-end; */
    /* justify-content: space-around; */
    /* justify-content: space-between; */
    justify-content: space-evenly;
}

.flex_demo4 button:nth-of-type(2n){
    align-self: flex-end;
}

.flex_demo4 button:nth-of-type(2n + 1){
    align-self: flex-start;
}
